<template>
	<view></view>
</template>

<script>
	import * as echarts from 'echarts';
	import {
		mapGetters
	} from 'vuex';
	import {
		countCorrectCrime
	} from '@/common/api/approve/home/home_api.js'
	export default {
		data() {
			return {
				xAxisData: ['肇事罪人员', '入室行凶罪人员', '盗窃罪人员', '肇事罪人员', '入室行凶罪人员', '盗窃罪人员'],
				data: [125, 125, 5, 15, 125, 125]
			}
		},
		computed: {
			...mapGetters(['APPROVE_DEPT', 'getParentid'])
		},
		mounted() {
			this.getCountCorrectCrime()
		},
		beforeDestroy() {
			if (this.chart) {
				this.chart.dispose();
			}
		},
		methods: {
			initChart(xAxis, data) {
				let state = ''
				var proDom = document.getElementById('behaviorEcharts')
				console.log(proDom);
				if (proDom) {
					this.chart = echarts.init(behaviorEcharts);
					// 配置图表选项并设置到图表实例上  
				} else {
					console.error('图表容器不存在，无法初始化ECharts');
					return
				}
				this.chart.setOption({
					backgroundColor: '#fff', //背景颜色
					legend: {
						show: false,
					},
					grid: {
						left: "3.5%",
						right: "2%",
						top: "5%",
						bottom: "0%",
					},
					xAxis: [{
						splitLine: {
							show: false,
						},
						type: "value",
						show: false,
						axisLine: {
							//x轴坐标轴，false为隐藏，true为显示
							show: false,
						},
					}, ],
					yAxis: [{
							type: "category",
							show: false,
							splitLine: {
								show: false,
							},
							axisLine: {
								show: false,
							},

							axisTick: {
								show: false,
							},
							inverse: true,
							axisLabel: {
								color: '#bdbdbd',

								inside: true,
								verticalAlign: "bottom",
								lineHeight: 25,
								margin: 80,
								show: true,
								fontSize: 14,
								// formatter: function (params) {
								//    if (params == "未关注") {
								//       return ["{b" + "|" + params + "}"];
								//    } else if (params == "已关注") {
								//       return ["{a" + "|" + params + "}"];
								//    }
								// },
								// rich: {
								//    a: {
								//       color: "#fff",
								//       backgroundColor: "#3c9cff",
								//       width: 50,
								//       height: 14,
								//       align: "center",
								//       borderRadius: 5,
								//    },

								//    b: {
								//       color: "#fff",
								//       backgroundColor: "#d1d1d1",
								//       width: 50,
								//       height: 15,
								//       align: "center",
								//       borderRadius: 5,
								//    },
								// },
							},
							data: xAxis
						},
						{
							type: "category",
							inverse: true,
							axisTick: "none",
							axisLine: "none",
							show: true,
							axisLabel: {
								inside: true,
								verticalAlign: "bottom",
								lineHeight: 17,
								// margin: 5,
								show: true,
								textStyle: {
									color: "#000",
									fontSize: 14,
								},
								// formatter: function (value) {
								//   return value;
								// },
							},
							data: data,
						},
					],
					series: [{
						show: true,
						name: "",
						type: "bar",
						barWidth: 5, // 柱子宽度
						barGap: "30%",
						showBackground: true,
						backgroundStyle: {
							color: {
								type: "linear",
								x: 0,
								y: 0,
								x2: 1,
								y2: 1,
								colorStops: [{
										offset: 0,
										color: "rgba(255, 255, 255, 1)",
									},
									{
										offset: 1,
										color: "#ccc",
									},
								],
							},
						},
						label: {
							show: true,
							offset: [5, -15],
							color: "#000",
							fontSize: 16,
							// fontWeight: 500,
							position: "left",
							align: "left",
							formatter: function(xAxis) {
								return xAxis.name;
							},
						},
						itemStyle: {
							color: {
								type: "linear",
								x: 0,
								y: 0,
								x2: 1,
								y2: 1,
								colorStops: [{
										offset: 0,
										color: "#3496FB",
									},
									{
										offset: 1,
										color: "#3496FB",
									},
								],
							},
						},
						data: data,
					}, ],
					dataZoom: [{
						yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
						show: false, // 是否显示滑动条，不影响使用
						type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
						startValue: 0, // 从头开始。
						endValue: 5, // 展示到第几个。
						moveOnMouseWheel: true, // 开启滚轮平移
						zoomOnMouseWheel: false, // 关闭滚轮缩放
						zoomLock: true, //是否只平移不缩放
					}],
				});
			},
			async getCountCorrectCrime() {
				console.log(111);
				const res = await countCorrectCrime(this.getParentid)
				console.log(res, 'hfohwofhow');
				this.xAxisData = res.data.columnList.concat(res.data.columnList)
				this.data = res.data.valueList.concat(res.data.valueList)
				console.log(this.data);
				this.initChart(this.xAxisData, this.data);
			}
		}
	}
</script>

<style>

</style>